import {useState} from 'react'
import { SonCounter } from '../SonCounter/SonCounter'
import './FatherCounter.css'
export const FatherCounter = () => {
    const [sonCount, setSonCount] = useState(0)
    const [fatherCount, setFatherCount] = useState(0)
    console.log('FatherCounter rendered')


    return (
        <div className='father'>
            <div>This is FatherCounter. My count is {fatherCount} </div>
            <button onClick={() => {setFatherCount(fatherCount +1)}}>Add Father Count</button>
            <button onClick={() => {setSonCount(sonCount +1)}}>Add Son Count</button>
            <SonCounter sonCount={sonCount}/>
        </div>
    )
}